<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导入 - 小说转有声书APP</title>
    <link rel="stylesheet" href="css/style.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <style>
        .upload-area {
            border: 2px dashed var(--border-color);
            border-radius: 0.5rem;
            padding: 2rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .upload-area:hover {
            border-color: var(--primary-color);
            background-color: rgba(99, 102, 241, 0.05);
        }
        
        .upload-icon {
            font-size: 48px;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }
        
        .format-badge {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            margin: 0.25rem;
            background-color: var(--bg-secondary);
            border-radius: 0.25rem;
            font-size: 0.875rem;
        }
        
        .platform-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
            gap: 1rem;
        }
        
        .platform-card {
            border: 1px solid var(--border-color);
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .platform-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px);
        }
        
        .platform-icon {
            font-size: 36px;
            margin-bottom: 0.5rem;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="navbar">
        <div class="flex items-center gap-2">
            <span class="icon">menu</span>
            <h1>导入小说</h1>
        </div>
        <div class="flex items-center gap-2">
            <span class="icon">help_outline</span>
        </div>
    </header>
    
    <div class="container" style="margin-bottom: 60px;">
        <!-- 导入指南 -->
        <div class="card">
            <h2>开始创建您的有声书</h2>
            <p>导入小说文本，我们将使用AI技术自动识别角色并生成高质量的有声内容。</p>
        </div>
        
        <!-- 本地文件导入 -->
        <div class="card mt-4">
            <h3>本地文件导入</h3>
            <p>支持TXT、EPUB、PDF、DOC/DOCX等多种文本格式</p>
            
            <div class="upload-area mt-4">
                <span class="material-icons upload-icon">cloud_upload</span>
                <h3>拖放文件到此处或点击上传</h3>
                <p>最大支持50MB的文件</p>
                <div class="mt-4">
                    <span class="format-badge">TXT</span>
                    <span class="format-badge">EPUB</span>
                    <span class="format-badge">PDF</span>
                    <span class="format-badge">DOC/DOCX</span>
                </div>
            </div>
            
            <button class="btn btn-primary mt-4">
                <span class="icon">file_upload</span>
                选择文件
            </button>
        </div>
        
        <!-- 网络链接导入 -->
        <div class="card mt-4">
            <h3>网络链接导入</h3>
            <p>输入小说文本的网络链接，我们将自动获取内容</p>
            
            <div class="flex gap-2 mt-4">
                <input type="text" class="input" placeholder="https://example.com/novel.txt">
                <button class="btn btn-primary">获取</button>
            </div>
        </div>
        
        <!-- 平台导入 -->
        <div class="card mt-4">
            <h3>从热门平台导入</h3>
            <p>直接从热门小说平台一键导入您的小说</p>
            
            <div class="platform-grid mt-4">
                <div class="platform-card">
                    <span class="material-icons platform-icon">menu_book</span>
                    <h4>起点中文网</h4>
                </div>
                
                <div class="platform-card">
                    <span class="material-icons platform-icon">menu_book</span>
                    <h4>纵横小说</h4>
                </div>
                
                <div class="platform-card">
                    <span class="material-icons platform-icon">menu_book</span>
                    <h4>晋江文学</h4>
                </div>
                
                <div class="platform-card">
                    <span class="material-icons platform-icon">menu_book</span>
                    <h4>笔趣阁</h4>
                </div>
                
                <div class="platform-card">
                    <span class="material-icons platform-icon">menu_book</span>
                    <h4>17K小说</h4>
                </div>
                
                <div class="platform-card">
                    <span class="material-icons platform-icon">add</span>
                    <h4>更多平台</h4>
                </div>
            </div>
        </div>
        
        <!-- 最近导入 -->
        <div class="card mt-4">
            <div class="flex justify-between items-center">
                <h3>最近导入</h3>
                <a href="#" class="nav-link">查看全部</a>
            </div>
            
            <div class="mt-4">
                <div class="flex justify-between items-center p-2">
                    <div class="flex items-center gap-2">
                        <span class="material-icons">description</span>
                        <div>
                            <h4>三体.txt</h4>
                            <p class="text-secondary">2.3MB · 今天 14:30</p>
                        </div>
                    </div>
                    <button class="btn btn-primary">转换</button>
                </div>
                
                <div class="flex justify-between items-center p-2">
                    <div class="flex items-center gap-2">
                        <span class="material-icons">description</span>
                        <div>
                            <h4>活着.epub</h4>
                            <p class="text-secondary">1.8MB · 昨天 09:45</p>
                        </div>
                    </div>
                    <span class="badge">已转换</span>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <nav class="bottom-nav">
        <a href="home.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">home</span>
            <span>首页</span>
        </a>
        <a href="library.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">library_books</span>
            <span>书库</span>
        </a>
        <a href="import.html" class="bottom-nav-item active">
            <span class="material-icons bottom-nav-icon">add_circle</span>
            <span>导入</span>
        </a>
        <a href="player.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">headphones</span>
            <span>播放</span>
        </a>
        <a href="settings.html" class="bottom-nav-item">
            <span class="material-icons bottom-nav-icon">settings</span>
            <span>设置</span>
        </a>
    </nav>
</body>
</html> 